import React from 'react';
import BreadcrumbCustom from '../BreadcrumbCustom';
import { Row, Col, Card } from 'antd';
import EchartsViews from './EchartsViews';
import {
  HeartOutlined,
  UserAddOutlined,
  DollarCircleOutlined,
  FileDoneOutlined,
} from '@ant-design/icons';

class Dashboard extends React.Component {
  render() {
    return (
      <div className="py-3">
        <BreadcrumbCustom />
        <Row gutter={10} className="mt-3">
          <Col md={6}>
            <Card bordered={false}>
              <div className="flex items-center">
                <HeartOutlined
                  style={{ color: '#eb2f96' }}
                  className="text-2xl"
                />
                <div className="ml-3">
                  <p className="text-sm mb-0">搜藏</p>
                  <h3 className="text-xl mb-0">51,923</h3>
                </div>
              </div>
            </Card>
          </Col>
          <Col md={6}>
            <Card bordered={false}>
              <div className="flex items-center">
                <UserAddOutlined
                  style={{ color: '#52c41a' }}
                  className="text-2xl"
                />
                <div className="ml-3">
                  <p className="text-sm mb-0">用户数</p>
                  <h3 className="text-xl mb-0">10,003</h3>
                </div>
              </div>
            </Card>
          </Col>
          <Col md={6}>
            <Card bordered={false}>
              <div className="flex items-center">
                <DollarCircleOutlined
                  className="text-2xl"
                  style={{ color: '#f5222d' }}
                />
                <div className="ml-3">
                  <p className="text-sm mb-0">收益额</p>
                  <h3 className="text-xl mb-0">123,000,30</h3>
                </div>
              </div>
            </Card>
          </Col>
          <Col md={6}>
            <Card bordered={false}>
              <div className="flex items-center">
                <FileDoneOutlined
                  style={{ color: '#1890ff' }}
                  className="text-2xl"
                />
                <div className="ml-3">
                  <p className="text-sm mb-0">账单数据统计</p>
                  <h3 className="text-xl mb-0">6,000,30</h3>
                </div>
              </div>
            </Card>
          </Col>
        </Row>
        <Row gutter={10} className="mt-3">
          <Col md={12}>
            <Card bordered={false}>
              <EchartsViews />
            </Card>
          </Col>
        </Row>
      </div>
    );
  }
}

export default Dashboard;
